<template>
  <div class="article-list">
    <div class="item" v-for="v in list" :key="v._id">
      <router-link :to="`/article/${v._id}`" class="article-title"><span>{{v.title}}</span>
      </router-link>
      <div class="article-info">
        <span>
          <i class="iconfont icon-shijian"></i>{{v.createAt | formatDate}}
        </span>
        <span>
          <i class="iconfont icon-zhekou"></i>{{v.tags[0].name}}
        </span>
        <span>
          <i class="iconfont icon-jushoucang"></i>{{v.numbers.like}}
        </span>
        <span>
          <i class="iconfont icon-pinglun"></i>{{v.numbers.comment}}
        </span>
        <span>
          <i class="iconfont icon-read"></i>{{v.numbers.look}}
        </span>
      </div>
      <div class="summery">{{v.content | contentFilter | overflowEllipsis}}</div>
      <router-link :to="`/article/${v._id}`" class="read-article">阅读全文</router-link>
    </div>
    <pager v-if="list" :page="page" :count="count" @next="pageFn(1)" @prev="pageFn(-1)" />
  </div>
</template>
<div></div>
<script>
import Pager from '../../components/pager.vue'

export default {
  name: 'Index',
  data () {
    return {
      list: null,
      count: 0,
      page: 1
    }
  },
  components: {
    Pager
  },
  created () {
    this.getList()
  },
  mounted () {
  },
  methods: {
    // 获取列表
    async getList () {
      const {data} = await this.$http.get('/v1/article', {params: {page: this.page}})
      // console.log(data)
      this.list = data.list
      this.page = parseInt(data.page)
      this.count = parseInt(data.count)
    },
    // 翻页
    async pageFn (number) {
      this.page += number
      await this.getList()
      this.$utils.scrollToTop()
    }
  }
}
</script>
